import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Input, Picker, Image, Form, Button } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime } from "../../utils/common";
import bank_card_addStyleSheet from "./bank_card_add_styles";

import right from '../../assets/img/right.png';
var _styleSheet = bank_card_addStyleSheet;
let Page3 = class Page3 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allBank: [],
      currentIndex: 0,
      bankCode: '',
      bankName: ''
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '添加银行卡' });
    this.getAllBank();
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  getAllBank() {
    let { userStore } = this.props.stores;
    userStore.getBanks({
      callback: res => {
        let allBank = toJS(res.items);
        if (allBank) {
          this.setState({
            allBank
          });
        }
      }
    });
  }
  changeBank(e) {
    this.setState({
      currentIndex: e.detail.value
    });
  }
  onSubmit(e) {
    let { cardName, cardNumber } = e.detail.value;
    let { allBank, currentIndex } = this.state;
    let { userStore } = this.props.stores;
    if (!cardName) {
      getRuntime().showToast('请填写持卡人姓名~');
      return;
    }
    if (!cardNumber) {
      getRuntime().showToast('请填写银行卡卡号~');
      return;
    }
    // if(!isNumber(cardName)){ getRuntime().showToast('银行卡卡号只能为数字~');return; }
    userStore.saveUserCard({
      form: {
        cardName,
        cardNumber,
        bankCode: allBank[currentIndex]['bankCode'],
        bankName: allBank[currentIndex]['bankName']
      },
      callback: res => {
        getRuntime().showToast('添加银行卡成功~');
        setTimeout(() => {
          getRuntime().navigateBack();
        }, 2000);
      }
    });
  }
  render() {
    let { allBank, currentIndex } = this.state;
    return <View style={_styleSheet["from-wrap"]}>
        <Form onSubmit={this.onSubmit.bind(this)}>
          <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>持卡人</View>
              <Input placeholderClass="placeholder_class" placeholder="请填写持卡人" name="cardName" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>银行卡号</View>
              <Input type="number" name="cardNumber" maxLength={19} placeholderClass="placeholder_class" placeholder="请填写19位银行卡号" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>开户行</View>
              <Picker mode="multiSelector" rangeKey="bankName" range={[allBank]} onChange={this.changeBank.bind(this)} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{allBank[currentIndex]['bankName']}</View>
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>
          </View>
          <Button formType={"submit"} style={[_styleSheet["from-submit"], _styleSheet["page-from-submit"]]}>确定添加</Button>
        </Form>
      </View>;
  }
};
Page3 = tslib_1.__decorate([inject("stores"), observer], Page3);
export default Page3;